
@define-mixin typo-base{
	-webkit-font-smoothing: antialiased;
  text-decoration: inherit;
  text-transform: inherit;
	font-family: 'Roboto';
}

@define-mixin typo-h1{
	@mixin typo-base{};
	font-size: 36px;
	font-weight: 400;
}

@define-mixin typo-h2{
	@mixin typo-base{};
	font-size: 28px;
	font-weight: 400;
}

@define-mixin typo-h3{
	@mixin typo-base{};
	font-size: 21px;
  font-weight: 400;
}

@define-mixin typo-h4{
	@mixin typo-base{};
	font-size: 18px;
  font-weight: 400;
}

/* can for a column title */
@define-mixin typo-sub1{
	@mixin typo-base{};
	font-size: 16px;
	font-weight: 400;
}

/* can for a column value */
@define-mixin typo-sub2{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 500;
}

@define-mixin typo-body1{
	@mixin typo-base{};
	font-size: 16px;
	font-weight: 400;
}

@define-mixin typo-body2{
	@mixin typo-base{};
	font-size: 14px;
  font-weight: 400;
}

@define-mixin typo-body3{
	@mixin typo-base{};
	font-size: 12px;
  font-weight: 400;
}


@define-mixin typo-prim-button1{
	@mixin typo-base{};
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

@define-mixin typo-prim-button2{
	@mixin typo-base{};
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

@define-mixin typo-scnd-button1{
	@mixin typo-base{};
	text-transform: uppercase;
	font-size: 16px;
  font-weight: 700;
	color: var(--clr-prime-700);
}

@define-mixin typo-scnd-button2{
	@mixin typo-base{};
	text-transform: uppercase;
	font-size: 14px;
  font-weight: 700;
	color: #fff;
	color: var(--clr-prime-700);
}

@define-mixin typo-label{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 400;
}

@define-mixin typo-caption{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 400;	
}

@define-mixin typo-field-label{
	@mixin typo-base{};
	font-size: 12px;
	font-weight: 500;	
}

@define-mixin typo-field-value{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 400;	
}

@define-mixin typo-col-label{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 700;
	color: var(--clr-prime-400);
}

@define-mixin typo-col-value{
	@mixin typo-base{};
	font-size: 14px;
	font-weight: 400;	
	color: var(--clr-prime-700);
}

@define-mixin typo-nav{
	@mixin typo-base{};
	font-size: 0.875rem;
	line-height: 1;
	font-weight: 400;
	letter-spacing: .05em;
	color: var(--txt-L1);
	display: flex;
	align-items: center;
}

@define-mixin typo-item{
	@mixin typo-base{};
	font-size: .75rem;
	line-height: 1.5rem;
	letter-spacing: .0315em;
	font-weight: 400;
	color: var(--txt-L0);
}